<template>
  <div class="app-container">
    <el-form :inline="true" :model="searchObj" class="demo-form-inline">
      <el-form-item>
        <el-select v-model="searchObj.type" placeholder="请选择">
          <el-option label="学员登录数统计" value="login_num"></el-option>
          <el-option label="学员注册数统计" value="register_num"></el-option>
          <el-option label="课程播放数统计" value="video_view_num"></el-option>
          <el-option label="每日课程数统计" value="course_num"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="统计时间">
        <el-date-picker v-model="searchObj.begin" type="date" placeholder="选择开始时间"></el-date-picker>
        <el-date-picker v-model="searchObj.end" type="date" placeholder="选择截至时间"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="showChart" :disabled="disabled">查询</el-button>
      </el-form-item>
    </el-form>
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import statisticsApi from '../../api/statistics';
export default {
  data() {
    return {
      searchObj: {},
      xData: {},
      yData: {},
      disabled:false
    }
  },
  methods: {
    showChart() {
      // 获取查询参数，调用统计api获取数据
      this.disabled=true
      console.log(this.searchObj);
      statisticsApi.getData(this.searchObj).then(res => {
        // 渲染折线图
        this.xData=res.data.xData
        this.yData=res.data.yData
        this.disabled=false
        this.setChart()
      })
    },
    // 折线图
    setChart() {
      // // 基于准备好的dom，初始化echarts实例
      // var myChart = echarts.init(document.getElementById('main'));
      // // 绘制图表
      // var option;

      // option = {
      //   xAxis: {
      //     type: 'category',
      //     data: this.xData
      //   },
      //   yAxis: {
      //     type: 'value'
      //   },
      //   series: [
      //     {
      //       data: this.yData,
      //       type: 'line'
      //     }
      //   ]
      // };
      // option && myChart.setOption(option);

      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: this.xData,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.yData,
            type: "line",
          },
        ],
      };

      option && myChart.setOption(option);
    }
  },
}
</script>


